<template>
  <!-- 楼层 -->
  <div class="floor">
    <div class="floor-container">
      <div class="floor-head">
        <h3>居家生活</h3>

        <!-- 导航条 -->
        <ul>
          <li><span>/</span>办公椅/工学椅</li>
          <li><span>/</span>四季款</li>
          <li><span>/</span>秋冬款</li>
          <li><span>/</span>床垫床褥</li>
          <li><span>/</span>经典人气系列</li>
          <li><span>/</span>被子/被芯</li>
          <li><span>/</span>休闲椅/凳</li>
        </ul>

        <a href="">
          <span>查看更多 ></span>
        </a>
      </div>
      <!-- 大图 -->
      <div class="floor-bigimg">
        <img
          src="https://yanxuan.nosdn.127.net/403ef629810368c9b3e0e6fd863ebb4e.jpg?type=webp&imageView&&thumbnail=1090x310&quality=95"
        />
      </div>
      <div class="floor-show">
        <!-- 一个商品展示 -->
        <div class="show-commodity">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/b8b8402a093be0f1a7313892df89b662.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>原创调色 珠光色铸铁珐琅锅22cm</span> </a>
            <p>￥288 <span>￥129</span></p>
          </div>
        </div>
        <div class="show-commodity">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/b8b8402a093be0f1a7313892df89b662.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>原创调色 珠光色铸铁珐琅锅22cm</span> </a>
            <p>￥288 <span>￥129</span></p>
          </div>
        </div>
        <div class="show-commodity">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/b8b8402a093be0f1a7313892df89b662.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>原创调色 珠光色铸铁珐琅锅22cm</span> </a>
            <p>￥288 <span>￥129</span></p>
          </div>
        </div>
        <div class="show-commodity">
          <div class="show-img">
            <img
              src="https://yanxuan-item.nosdn.127.net/b8b8402a093be0f1a7313892df89b662.jpg?type=webp&quality=95&thumbnail=265x265&imageView"
            />
          </div>
          <div class="describe">
            <a href="##"><span>原创调色 珠光色铸铁珐琅锅22cm</span> </a>
            <p>￥288 <span>￥129</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Floor",
};
</script>

<style lang="less" scoped>
//楼层
.floor {
  max-width: 100%;
  min-width: 1090px;
  // height: 789px;
  margin-top: 50px;
  // background-color: #eee;

  .floor-container {
    width: 1090px;
    height: 100%;
    margin: 0 auto;
    // background-color: #fff;

    // 楼层头部
    .floor-head {
      margin-bottom: 20px;
      position: relative;
      h3 {
        font-size: 28px;
        display: inline-block;
        cursor: pointer;
        &:hover {
          color: #b4a078;
        }
      }

      ul {
        float: right;
        font-size: 14px;
        position: absolute;
        right: 100px;
        bottom: 0;

        li:first-child span {
          display: none;
        }

        li {
          float: left;
          margin-right: 10px;
          cursor: pointer;
          &:hover {
            color: #b4a078;
          }
          span {
            display: inline-block;
            margin-right: 10px;
            font-weight: bold;
          }
        }
      }

      a {
        position: absolute;
        right: 0;
        bottom: 0;
        text-decoration: none;
        span {
          font-size: 14px;
          color: #333;

          &:hover {
            color: #b4a078;
          }
        }
      }
    }

    //楼层大图
    .floor-bigimg {
      width: 100%;
      height: 310px;
    }

    //展示商品
    .floor-show {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      .show-commodity {
        width: 265px;
        height: 361px;

        &:hover {
          background-color: #f4f0ea;
          // box-shadow: #333;
          box-shadow: 1px 1px 3px 1px #c9c5c5;
        }

        //新品图片
        .show-img {
          width: 265px;
          height: 265px;
          background-color: #f4f4f4;
        }

        //新品描述
        .describe {
          // height: 92px;

          a {
            text-decoration: none;

            span {
              display: block;
              width: 160px;
              text-align: center;
              height: 39px;
              font-size: 13px;
              margin: 0 auto;
              margin-top: 30px;
              font-weight: 600;
              color: #333;
              &:hover {
                color: #b4a078;
              }
            }
          }

          p {
            font-size: 13px;
            color: #d4282d;
            text-align: center;

            span {
              display: inline;
              color: #999;
              text-decoration: line-through;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
</style>
